<template>
  <div class="gContainer">
    <PaperRecommendation @getData="showRecResults"/>
    <el-table-column type="index"></el-table-column>
    <el-table :data="this.data.recommendationResults" stripe style="width: 100%;border: #9dadc1;">
      <el-table-column prop="name"  label="名称"  width="600"> </el-table-column>
      <el-table-column prop="url" label="链接" width="300"> </el-table-column>
      <!-- <el-table-column prop="address" label="地址"> </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import PaperRecommendation from '@/components/PaperRecommendation.vue'
// import d3graph from '@/components/d3graph.vue'
export default {
  components: {
    PaperRecommendation
  },
  data () {
    return {
      data: {
        recommendationResults: []
      }
    }
  },
  methods: {
    // 视图更新
    showRecResults (results) {
      const recommendationResults = []
      console.log('展示推荐结果！')
      for (const result of results) {
        recommendationResults.push({
          name: result.name,
          url: result.url
        })
      }
      this.data = { recommendationResults }
    }
  }
}
</script>

<style lang="scss" scoped>
.gContainer {
  position: relative;
  border: 2px #000 solid;
  // background-color: #9dadc1;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.el-table-column {
  border: 20px;
}
</style>
